<template>
<!-- ------------部门管理--------------- -->
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="search.dep_name"
        placeholder="部门名称"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="page1SearchPageList"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="ddtCreateShow"
      >
        添加
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="部门加载"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="部门名称" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.dep_name }}
        </template>
      </el-table-column>
      <el-table-column label="上级部门">
        <template slot-scope="scope">
          {{ scope.row.dep_up_description }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="40%" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="searchPageList"
    />
    <!--弹出层-->
    <!--:visible.sync="dialogFormVisible"  是否显示弹出层  dialogFormVisible变量在下面有定义-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form
        ref="dicTypeForm"
        :rules="rules"
        :model="dicTypInfo"
        label-position="right"
        label-width="120px"
      >
        <!--el-row  代表一行-->
        <el-row>
          <el-col :span="8">
            <!--::rules="this.dialogStatus === '1' ? rules.id : []"   表示添加的时候才验证字典key是否被占用-->
            <el-form-item
              label="部门名称"
              prop="p_name"
              :rules="this.dialogStatus === '1' ? rules.dep_name : []"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-if="this.dialogStatus === '1'"
                v-model="dicTypInfo.dep_name"
              />
              <!-- v-else  vue 的else  和上面的if判断对应-->
              <el-tag v-else type="info">{{ dicTypInfo.p_name }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--\u3000代表大空格 -->
            <el-form-item label="上级部门" prop="p_department">
              <el-input v-model.number="dicTypInfo.dep_up_description" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addDictType() : updateDictType()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
    <!-- ----------------修改弹框-------------- -->
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="部门名称">
            <el-input v-model="form.dep_name"></el-input>
          </el-form-item>
          <el-form-item label="上级部门">
            <el-input v-model="form.dep_up_description"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="DepartmentUpdate">修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  DepartmentGetAll,
  DepartmentGet,
  PositionValidatorId,
  DepartmentCreated,
  DepartmentUpdate,
  DepartmentDelets,
} from "@/api/system_base/SystemManagement/Departmentmanagement"; // 引入职位

import Pagination from "@/components/Pagination"; // 引入分页组件

export default {
  components: { Pagination },
  data() {
    return {
      // 验证配置
      rules: {
        p_name: [
          { required: true, message: "请输入部门名称", trigger: "change" }, // 验证是否为空
        ],
        dep_up_description: [{ required: true, message: "请输入上级部门" }],
      },
      list: null, //表格绑定数据
      listLoading: true, //是否显示加载提示
      total: 0, //总行数

      //查询对象
      search: {
        page: 1, //当前页
        maxResultCount: 2, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        dep_name: "", //职位名称
      },
      dialogFormVisible: false, // 是否显示添加弹出层
      dialogTitle: "", // 弹出层标题
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      dicTypInfo: {},
      form: {},
      //修改弹框
      dialogVisible: false,
    };
  },
  created() {
    this.resetDicinfo(); //初始化model
    this.searchPageList();
  },
  methods: {
    //删除
    handleDelete(dd) {
      if (confirm("确定删除？")) {
        DepartmentDelets(dd).then((response) => {
          this.$notify({
            title: "删除部门成功",
            message: "删除部门成功",
            type: "success",
            duration: 2000,
          });
          this.searchPageList();
        });
      }
    },
    // 搜索方法
    searchPageList() {
      this.listLoading = true; // 显示加载效果

      this.search.skipCount =
        (this.search.page - 1) * this.search.maxResultCount;

      DepartmentGetAll(this.search).then((response) => {
        // 调用分页接口
        this.list = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    resetDicinfo() {
      // 初始化用户对象
      this.dicTypInfo = {
        dep_name: "",
        dep_up_description: "",
      };
    },
    ddtCreateShow() {
      //弹出添加页面
      this.resetDicinfo();
      this.dialogStatus = "1"; // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = "添加";
      this.dialogFormVisible = true; // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs["dicTypeForm"].clearValidate(); // 清理验证
      });
    },
    //添加方法
    addDictType() {
      this.$refs["dicTypeForm"].validate((valid) => {
        if (valid) {
          DepartmentCreated(this.dicTypInfo).then((response) => {
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "添加职位成功",
              message: "添加职位成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    //修改弹出层显示
    handleEdit(dd) {
      this.dialogVisible = true;
      DepartmentGet(dd).then((r) => {
        this.form = r.result;
      });
    },
    //职位修改
    DepartmentUpdate() {
      DepartmentUpdate(this.form).then(r=>{
        this.dialogVisible = false;
            this.searchPageList();
            this.$notify({
              title: "修改职位成功",
              message: "修改职位成功",
              type: "success",
              duration: 2000,
            });
      })
    },
    updateDictType() {},
  },
};
</script>
<style >
.search_input {
  width: 200px;
}
</style>
